<!--首页导航栏-->
<template>
  <nav class="navbar">
    <router-link to="/" class="logo">
      <img class="img-fluid" src="@/assets/svgexport-2.png" alt="Logo" />
    </router-link>
    <ul class="nav-links">
      <li>
        <router-link to="/" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">首页</span>
          </span>
        </router-link>
      </li>
      <li>
        <router-link to="/conversation" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">智能对话</span>
          </span>
        </router-link>
      </li>

      <li>
        <router-link to="/aaa" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">产品介绍</span>
          </span>
        </router-link>
      </li>

      <li>
        <router-link to="/aaa" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">应用案例</span>
          </span>
        </router-link>
      </li>

      <li>
        <router-link to="/aaa" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">生态合作</span>
          </span>
        </router-link>
      </li>

      <li>
        <router-link to="/aaa" active-class="active-link">
          <span class="navname">
            <span style="margin-left: 15px">关于我们</span>
          </span>
        </router-link>
      </li>
    </ul>

    <div class="spacer">
      <UserMenu v-if="isLogin" />
      <router-link to="/login">
        <el-button
          type="primary"
          size="large"
          class="white-button"
          v-if="!isLogin"
          >登陆 / 注册</el-button
        >
      </router-link>
    </div>
  </nav>
</template>

<script setup>
import UserMenu from "../../components/UserMenu.vue";
import { onMounted, ref } from "vue";
import { isTokenExpired } from "@/tools/fun.js";
const isLogin = ref(false);

onMounted(() => {
  const lu = localStorage.getItem("localUser");
  // 检查是否有本地存储
  if (lu) {
    // 检查本地存储的合法性
    const localUser = JSON.parse(lu);
    if (localUser.access_token.length !== 0) {
      let token = localUser.access_token;
      if (isTokenExpired(token)) {
        console.log("过期");
      } else {
        isLogin.value = localUser.is_login;
      }
    }
  }
});
</script>

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  background-color: rgba(0, 0, 0, 0.65); /* 设置半透明背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0px 20px;
  z-index: 1000;
}

.logo img {
  height: 40px;
  margin-left: 30%;
}

.navname {
  display: flex;
  justify-content: left;
  align-items: center;
}

.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  margin-left: 10vw;
  margin-top: 6px;
}

.nav-links li {
  margin: 0 50px;
}

.nav-links a {
  text-decoration: none;
  color: #ffffff;
  font-weight: bold;
  font-size: 18px;
  transition: color 0.3s ease;
  position: relative;
}

/* 暂时去掉
.nav-links a::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3.1px;
  background-color: #007bff;
  right: 0px;
  bottom: -5px;
  transition: width 0.5s ease;
}

.nav-links a:hover::after,
.nav-links a.active-link::after {
  width: 80px;
}
*/
.nav-links a:hover,
.nav-links a.active-link {
  color: #007bff;
}

.spacer {
  margin-left: auto; /* 将spacer移到右侧 */
  margin-right: 5%;
}

/* 下拉菜单样式 */
.navbar .ant-dropdown-trigger {
  cursor: pointer;
}

.navbar .ant-dropdown-menu {
  min-width: 100px;
}

/* 调整下拉菜单的位置 */
.navbar .ant-dropdown-menu {
  min-width: 100px;
  margin-top: 30px; /* 添加额外的顶部边距 */
}

.navbar .ant-dropdown-menu-item {
  padding: 8px 16px;
}

.navbar .ant-dropdown-menu-item:hover {
  background-color: #f5f5f5;
}
.white-button {
  background-color: #ffffffed;
  color: #000000;
  border-color: #ffffff;
  border-radius: 50px;
  font-size: 16px;
}
</style>
